<template>
  <view class="work-container">
    <u-gap :height="5"></u-gap>
    <template v-for="(menu, index) in newMenuList">
      <view class="menu-wrap">
        <uni-section :title="menu.meta.title" title-color="#8a8a8a" titleFontSize="16px"> </uni-section>

        <view class="grid-body">
          <u-grid :border="false" :col="4">
            <u-grid-item v-for="(item, i) in menu.children" :key="i" @click="changeMenu(item)">
              <view class="grid-item-box">
                <u-icon :customStyle="{ padding: '10rpx', borderRadius: '5px', backgroundColor: menu.meta.iconColor }"
                  :name="item.meta.icon" color="#fff" :size="28"></u-icon>
                <text class="text">{{ item.meta.title }}</text>
                <text class="num" v-if="item.dot">{{item.dot}}</text>
              </view>
            </u-grid-item>
          </u-grid>
          <u-empty mode="permission" v-if="menu.children.length == 0"></u-empty>
        </view>
      </view>
      <u-gap :height="5"></u-gap>
    </template>
	
    <template v-for="(menu, index) in menuList">
      <view class="menu-wrap">
        <uni-section :title="menu.text" title-color="#8a8a8a" titleFontSize="16px"> </uni-section>

        <view class="grid-body">
          <u-grid :border="false" :col="4">
            <u-grid-item v-for="(item, i) in menu.children" :key="i" @click="changeMenu(item)">
              <view class="grid-item-box">
                <u-icon :customStyle="{ paddingTop: '0rpx' }" :name="item.icon" :color="item.color" :size="30"></u-icon>
                <text class="text">{{ item.text }}</text>
              </view>
            </u-grid-item>
          </u-grid>
          <u-empty mode="permission" v-if="menu.children.length == 0"></u-empty>
        </view>
      </view>
      <u-gap :height="5"></u-gap>
    </template>
  </view>
</template>

<script>
  import {
    checkPermi
  } from "@/utils/permission.js";
  import {
    getRouters
  } from '@/api/common.js'
  export default {
    data() {
      return {
        dataList: [{
          text: '生产管理',
          children: [{
              text: "一级拣选任务",
              path: "/pages/essay/essay",
              icon: "hourglass-half-fill",
              color: "#ff7d00",
            },
            {
              text: "发布",
              path: "/pages/essay/publish",
              icon: "edit-pen",
              color: "#ff7d00",
              permi: ["system:article:list"],
            },
          ]
        }],
        newMenuList: []
      };
    },
    computed: {
      menuList() {
        return this.dataList.filter((element) => {
          var newChildren = []
          element.children.filter((item) => {
            if (item.permi && checkPermi(item.permi)) {
              newChildren.push(item)
            } else if (!item.permi) {
              newChildren.push(item)
            }
          })
          element.children = newChildren
          if (newChildren.length == 0) {
            return false
          }
          return element
        })
      }
    },
    onReady() {
      this.$store.dispatch('GetInfo');
      getRouters().then(res => {
        this.newMenuList = res.data
      })
    },
    methods: {
      checkPermi,
      changeGrid(e) {
        if (e && e.path.length > 0) {
          uni.navigateTo({
            url: e.path,
          });
        } else {
          this.$modal.showToast("模块建设中~");
        }
      },
      changeMenu(item) {
        console.log(item)
        if (item && item.path) {
          if (item.path == "/pages/notice/index") {
            this.$tab.switchTab('/pages/message/message')
          } else {
            this.$tab.navigateTo(item.path);
          }
        } else {
          this.$modal.msg('跳转失败')
        }
      }
    },
  };
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-body {
    background-color: #fff;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }
</style>
